// ignore_for_file: must_be_immutable

/*
 * @Author: CodeHare
 * @Date: 2023-10-07 10:46:12
 * @LastEditors: CodeHare
 * @LastEditTime: 2023-12-08 18:31:26
 * @Description: 收益柱状图表
 */

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:get/get.dart';
import 'package:yt_devops/components/log_utils.dart';
import 'package:yt_devops/resources/str_res_keys.dart';

class IncomeBarLine extends StatefulWidget {
  /// 收益数据
  List<List>? incomeData;

  /// 是否需要切分时段
  int? needSplitTime;

  IncomeBarLine({
    super.key,
    this.incomeData,
    this.needSplitTime = 0, // 0 1 2 3
  });

  @override
  State<IncomeBarLine> createState() => _IncomeBarLineState();
}

class _IncomeBarLineState extends State<IncomeBarLine> {
  @override
  Widget build(BuildContext context) {
    Log.d('widget.incomeData==' + widget.incomeData.toString());
    return Echarts(
      captureHorizontalGestures: true,
      option: '''
        {
          backgroundColor: '#ffffff',

          /// 提示框
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.85)',
            axisPointer: {
              /// 默认为直线，可选为：'line' | 'shadow'
              type: 'line',
              position: function (pt) {
                return [pt[0], 500];
              }
            },
            borderWidth: 0,
            opacity: 0.8,
            padding: [
              10, // 上
              8, // 右
              10, // 下
              8 // 左
            ],
            textStyle: {
              color: 'white'
            }
          },

          /// 横轴
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                type: [10, 5],
                dashOffset: 5,
                color: 'rgba(0,0,0,0.09)',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#999999',
              fontSize: 11,
              align: 'left',
              verticalAlign: 'top',
              formatter: function (value, index) {
                if(${widget.needSplitTime == 0}) {
                  return value;
                } else if(${widget.needSplitTime == 1}) {
                  return value.substring(3, 5);
                } else if(${widget.needSplitTime == 2}) {
                  return value.substring(5, 7);
                } else if(${widget.needSplitTime == 3}) {
                  return value;
                }
              },
              // 横轴时间间隔
              interval: function (index) {  // 返回值是十分钟为一个间隔
                if(${widget.needSplitTime == 0}) {
                  if (index % 24 === 0) { 
                    return true;
                  } else {
                    return false;
                  }
                } else if(${widget.needSplitTime == 1}) {
                  if (index % 2 === 0) { 
                    return true;
                  } else {
                    return false;
                  }
                } else if(${widget.needSplitTime == 2}) {
                  if (index % 1 === 0) { 
                    return true;
                  } else {
                    return false;
                  }
                } else if(${widget.needSplitTime == 3}) {
                  return true;
                }
              },
            },
          },

          /// 纵轴
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            /// 坐标轴在 grid 区域中的横向分隔线
            splitLine: {
              show: true,
              lineStyle: {
                type: [10, 5],
                dashOffset: 5,
                color: 'rgba(0,0,0,0.09)',
                width: 1
              }
            },
            axisLabel: {
              color: '#999999',
              fontSize: 11,
            }
          },

          /// 图表数据
          series: [
            {
              type: 'bar',
              name: ${jsonEncode(ResKey.income.tr)},
              data: ${jsonEncode(widget.incomeData)},
              barMaxWidth: '10',
              // barGap: '60%',
              /// 柱状图形样式
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#01D57D'
                    },
                    {
                      offset: 1,
                      color: '#01D57D'
                    }
                  ]),
                  barBorderRadius: 12
                }
              }
            }
          ],

          /// 坐标轴
          grid: {
            left: '0%',
            right: '4%',
            bottom: '2%',
            top: '4%',
            containLabel: true
          }
        }
      ''',
    );
  }
}
